/**
 * @author hsy541
 */

// change the study id combo
var studySelectFunction = function(record) {
	studySampleTable.getStore().load( {
		params : {
			start : 0,
			limit : 25,
			studyId : record.value,
			taxonid : taxonidComboBox.getValue()
		}
	});
	
}

// json store of the grid panel
var studySampleTableStore = new Ext.data.JsonStore( {
	// store configs
	autoDestroy : true,
	url : 'TableBrowser/fetchSample',
	// reader configs
	root : 'samples',
	idProperty : 'id',
	fields : [ 'id', 'alias', 'description', 'instrumentModel', 'taxonid',
			'url', 'cellType', 'factor' ]
});

var studySampleTableCSM = new Ext.grid.CheckboxSelectionModel();
// sample table panel
var studySampleTable = new Ext.grid.GridPanel( {
	// fieldLabel: 'Sample',
	// labelSeparator: ':',
	loadingText : 'Loading all the samples',
	height : 400,
	title : 'Sample Table',
	store : studySampleTableStore,
	// trackMouseOver : false,
	// disableSelection : true,
	// loadMask : true,

	// grid columns
	columns : [ studySampleTableCSM, {
		// id: 'topic', // id assigned so we can apply custom css (e.g.
		// .x-grid-col-topic b { color:#333 })
		header : "SampleID",
		dataIndex : 'id',
		width : 100,
		sortable : true
	}, {
		header : "Sample Name",
		dataIndex : 'alias',
		width : 100,
		// hidden: true,
		sortable : true
	}, {
		header : "Instrument Model",
		dataIndex : 'instrumentModel',
		width : 200,
		align : 'left',
		sortable : true
	}, {
		// id: 'last',
		header : "Taxon ID",
		dataIndex : 'taxonid',
		width : 100,
		sortable : true
	}, {
		// id: 'last',
		header : "Cell Type",
		dataIndex : 'cellType',
		width : 100,
		sortable : true
	}, {
		// id: 'last',
		header : "Factor",
		dataIndex : 'factor',
		width : 100,
		sortable : true
	}, {
		header : "Description",
		dataIndex : 'description',
		width : 300,
		align : 'left'
	}, {
		header : "URL",
		dataIndex : 'url',
		width : 400,
		sortable : true
	} ],

	sm : studySampleTableCSM,
	bbar : new Ext.PagingToolbar( {
		pageSize : 25,
		// store: store,
		displayInfo : true,
		displayMsg : 'Displaying topics {0} - {1} of {2}',
		emptyMsg : "No topics to display",
		items : [ '-', {
			xtype : 'button',
			text : 'Select',
			listeners : {
				'click' : selectStudySample
			}
		} ]
	})
});

studySampleTableStore.load( {});

function selectStudySample(button, event) {
	rs = studySampleTableCSM.getSelections();
	for (i = 0; i < rs.length; i++) {
		var leafNode = {
			text : rs[i].get('id') + ' ' + rs[i].get('alias'),
			leaf : true,
			checked : false
		};
		if (!westTreePanel.getNodeById('selectedSampleTreeNode').findChild(
				'text', rs[i].get('id') + ' ' + rs[i].get('alias'))) {
			treeData[0].children.push(leafNode);
			westTreePanel.getRootNode().reload();
			westTreePanel.getNodeById('selectedSampleTreeNode').expand();
		}
	}
}

// create the json store of the studyid combo box
var studyIDStore = new Ext.data.ArrayStore( {
	// store configs
	autoDestroy : true,
	url : 'TableBrowser/fetchAllStudyIds',
	storeId : 'studyStore',
	idIndex : 0,
	fields : [ 'index', 'id', 'longid' ]
});

// create the combo instance
var studyIdComboBox = new Ext.form.ComboBox( {
	loadingText : 'Loading all studies...',
	fieldLabel : 'Study ID',
	name : 'studyID',
	anchor : '60%',
	allowBlank : false,
	labelSeparator : ':', // override labelSeparator layout config
	// typeAhead: true,
	triggerAction : 'all',
	// lazyRender: true,
	mode : 'local',
	store : studyIDStore,
	valueField : 'id',
	displayField : 'longid',
	// all of your config options
	listeners : {
		scope : this,
		'select' : studySelectFunction
	}

});

var taxonSelectFunction = function(record) {
	if (record.value != -1)
		studyIDStore.load( {
			params : {
				taxonid : record.value
			}
		});
	else
		studyIDStore.load( {});
}

// create the taxon id combo instance
var taxonidComboBox = new Ext.form.ComboBox( {
	loadingText : 'Loading all taxons...',
	fieldLabel : 'Species',
	name : 'taxonID',
	anchor : '40%',
	allowBlank : false,
	labelSeparator : ':', // override labelSeparator layout config
	// typeAhead: true,
	triggerAction : 'all',
	// lazyRender: true,
	mode : 'local',
	// temporarily in code

	store : new Ext.data.ArrayStore( {
		id : 0,
		fields : [ 'taxonId', 'displayText' ],
		data : [ [ -1, 'Other' ], [ 9606, 'Human' ], [ 10090, 'Mouse' ],
				[ 4932, 'Yeast' ] ]
	}),
	valueField : 'taxonId',
	displayField : 'displayText',
	// all of your config options
	listeners : {
		scope : this,
		'select' : taxonSelectFunction
	}

});

var studySampleTableView = new Ext.form.FormPanel( {

	bodyStyle : 'padding:15px',
	// width : 1500,
	defaults : {
	// applied to each contained item
	// width : 1500
	// msgTarget: 'side'
	},
	items : [ taxonidComboBox, studyIdComboBox, studySampleTable ],
	// buttons: [{
	// text: 'Save'
	// }, {
	// text: 'Cancel'
	// }],
	layoutConfig : {
		labelSeparator : '~' // superseded by assignment below
	},
	// config options applicable to container when layout='form':
	hideLabels : false,
	labelAlign : 'left', // or 'right' or 'top'
	labelSeparator : ':  ', // takes precedence over layoutConfig value
	labelWidth : 65, // defaults to 100
	labelPad : 8
// defaults to 5, must specify labelWidth to be honored
		});